<template>
  <div class="article-detail-page">
    <div class="article-section">
      <div class="section-detailObj" >
        <p class="title">{{translate?detailObj.ai_title:detailObj.title}}</p>
        <div class="author">作者：{{detailObj.authors}}</div>
        <div class="publish-time">发表时间：{{detailObj.date}}</div>
        <div class="link">
          <a target="_blank" :href="detailObj.link">原文跳转链接</a>
        </div>
        <div class="abstract">
          <p class="abstract-title">
            <span>摘要</span>
            <span class="icon-link" @click="handleTranslate" v-if="!translate">
                <i class="iconfont iconfont-fanyi"></i>翻译
            </span>
            <span class="icon-link" @click="handleTranslate" v-else>
                原文
            </span>
          </p>
          <p class="text" ref="textRef">{{translate?detailObj.ai_abstract:detailObj.abstract}}</p>
        </div>
        <div class="article-keywords">
          <p class="keyword-title">文献关键词：</p>
          <p class="keywords">{{translate?detailObj.ai_keywords:detailObj.keywords}}</p>
        </div>
        <div class="article-footer">
          <div class="footer-row">
            <div class="link-btn" @click="handlePopDirSelect">收藏到我的智库</div>
            <a target="_blank" :href="detailObj.link">原文跳转链接</a>
          </div>
          <div class="footer-row">
            <div class="link-btn"  @click="handleGotoRecommend">相似文献推荐</div>
<!--            <span v-else>&nbsp;</span>-->
            <div class="link"  @click="handleBackTop">回到顶部</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <dir-select v-if="dirSelectShow" @close="handleDirSelectClose" @confirm="handleDirSelectConfirm"></dir-select>
</template>

<script setup lang="ts">
import {nextTick, ref, watch} from 'vue'
import {Calendar, Field, Loading, showLoadingToast, showFailToast, showSuccessToast, Cascader  } from "vant";
import {useRouter, useRoute} from "vue-router";
import api from '../api/index'
import common from "../common/common";
import DirSelect from '../components/dir-select.vue'

const props = defineProps({
  id: String,
  from: String,
})
const emits = defineEmits(['backTop', 'recommend'])
const router = useRouter()
const textRef = ref()
const uid = common.getLocalUid()
const dirSelectShow = ref(false)
const translate = ref(false)
const detailObj = ref({})
const getDetail = async () => {
  const toast = showLoadingToast({
    message: '加载中...',
    forbidClick: true,
    overlay: true,
    duration: 0,
  })
  try {
    const res = await api.getArticleDetail({
      uid,
      id: props.id,
    })
    toast.close()
    if (res.data) {
      detailObj.value = res.data
      nextTick(() => {
        window.MathJax.typesetPromise([textRef.value]);
      })
    } else {
      showFailToast({
        message: '获取数据失败',
        forbidClick: true,
      })
    }
  } catch(e){
    toast.close()
    showFailToast({
      message: '服务异常',
      forbidClick: true,
    })
  }

}
getDetail()
watch(() => props.id, () => {
  translate.value = false
  document.documentElement.scrollTop = 0
  getDetail()
})
const handleTranslate = () => {
  translate.value = !translate.value
  nextTick(() => {
    window.MathJax.typesetPromise([textRef.value]);
  })
}
const handleGotoRecommend = () => {
  if (props.from === 'recommend') {
    emits('recommend', props.id)
  } else {
    router.push(`/recommend?id=${props.id}`)
  }
}
const handleBackTop = () => {
  document.documentElement.scrollTop = 0
  emits('backTop')
}
const handlePopDirSelect = () => {
  dirSelectShow.value = true
}
const handleDirSelectClose = () => {
  dirSelectShow.value = false
}
const handleDirSelectConfirm = async (id) => {
  dirSelectShow.value = false
  const toast = showLoadingToast({
    message: '加载中...',
    forbidClick: true,
    overlay: true,
    duration: 0,
  })
  try {
    const res = await api.syncMyThinkTank({
      uid,
      parent_dir_id: id,
      ...detailObj.value,
    })
    toast.close()
    if (res.status === 'success') {
      showSuccessToast('收藏成功')
    } else {
      showFailToast({
        message: '收藏失败',
        forbidClick: true,
      })
    }
  } catch(e){
    toast.close()
    showFailToast({
      message: '服务异常',
      forbidClick: true,
    })
  }
}
</script>

<style scoped lang="less">
.article-detail-page{
  position: relative;
  padding: 0px 10px 50px;
  font-size: 16px;
}
.article-section{
  margin-top: 0;
}
</style>
